<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>测试弹窗</title>
  <script src="layui/layui.js" charset="utf-8"></script>
  <link rel="stylesheet" href="layui/css/layui.css" media="all">
  <link rel="stylesheet" href="layui/css/layform_sm.css" media="all">
</head>

<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header">基础数据 / 商品列表</div>
      <div class="layui-form layui-card-body layuiadmin-card-header-auto">
        <div class="layui-form-item">

          <div class="layui-input-block">
            <textarea class="layui-textarea" id='textarea'></textarea>
          </div>
          <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" id="popTreeTable">点我</button>
          </div>
        
        </div>
      </div>


    </div>
  </div>

  <script>
    layui.config({ base: './lib/' });
    layui.use(['layer', 'popTreeTable'], function () {
      var $ = layui.$, popTreeTable = layui.popTreeTable;

      $('#popTreeTable').click(function () {

        popTreeTable.open({
          title: '商品列表'
          ,table:{
            url: './data/table.js'
            ,joinField: 'ptType'
            ,cols: [[
              , {field: 'id', hide: true}
              , {field: 'ptCode', title: '商品编码'}
              , {field: 'ptName', title: '商品名称'}
              , {field: 'ptRuleModel', title: '规格型号'}
              , {field: 'ptBrand', title: '商品品牌'}
              , {title: '操作', align: 'center', fixed: 'right', toolbar: '#lay-toolbar', width: 80}
            ]]
          }
          ,tree:{
            title: '商品分类'
            ,url: './data/tree.js'
          }
          ,done: function (obj) {
            $('#textarea').val(JSON.stringify(obj));
            console.log(obj);
          }
        });
      });
    });

  </script>
</body>

</html>